{% extends '_base.html' %}
{% load static %}
{% block maincontent %}
<div class="col-md-5">
  <ol class="breadcrumb">
    <li><a href="">Home</a></li>
    <li class="active">Appointment</li>
  </ol>
</div>
  <!--contact-->
  <section id="contact" class="section-padding">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <h2 class="ser-title">Get Appointment</h2>
          <hr class="botm-line">
        </div>

        <div class="col-md-12 col-sm-8 ">
          <div class="contact-info">
            <h3 class="cnt-ttl">Having Any Query! Or Book an appointment</h3>
            <div class="space"></div>

            {% if messages %}
            <div class="w-full text-white bg-green-500">
                <div class="container flex items-center justify-between px-6 py-4 mx-auto">
                    <div class="flex">
                        <svg viewBox="0 0 40 40" class="w-6 h-6 fill-current">
                            <path d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM16.6667 28.3333L8.33337 20L10.6834 17.65L16.6667 23.6166L29.3167 10.9666L31.6667 13.3333L16.6667 28.3333Z"></path>
                        </svg>
                        {% for message in messages %}
                        <p class="mx-3">{{ message }}</p>
                        {% endfor %}
                    </div>

                    <button class="p-1 transition-colors duration-200 transform rounded-md hover:bg-opacity-25 hover:bg-gray-600 focus:outline-none">
                        <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M6 18L18 6M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </button>
                </div>
            </div>
            {% else %}

              <form action="{% url 'appointment' %}" method="post" role="form" class="contactForm">
                  {% csrf_token %}
                  <div class="form-group">
                    <input type="text" name="name" class="form-control br-radius-zero" id="name" placeholder="Full Name *" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
                    <div class="validation"></div>
                  </div>
                  <div class="form-group">
                    <input type="text" class="form-control br-radius-zero" name="phone" id="subject" placeholder="Your Phone *" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
                    <div class="validation"></div>
                  </div>
                  <div class="form-group">
                    <input type="email" class="form-control br-radius-zero" name="email" id="email" placeholder="Your Email *" data-rule="email" data-msg="Please enter a valid email" />
                    <div class="validation"></div>
                  </div>

                <div class="form-group" >
                <select name="doctor" class="form-control">
                  <option>--Doctor--</option>
                  {% for doctor in doctors %}
                  <option value="{{ doctor.id }}">{{ doctor.name }}</option>
                  {% endfor %}
                </select>
                </div>

                <div class="form-group">
                <select name="time" class="form-control">
                    <option disabled>--Time--</option>
                    <option value="morning">Morning</option>
                    <option value="morning">Evening</option>
                </select>
                </div>

                <div class="form-group">
                <div class="input-group date">
                    <input placeholder="Date *" name="date" class="form-control" type="date">
                    <span class="input-group-addon"></i> </span> </div>
                </div>

                <div class="form-group">
                    <textarea class="form-control br-radius-zero" name="message" rows="5" data-rule="required" data-msg="Please write something for us" placeholder="Extra Note..."></textarea>
                    <div class="validation"></div>
                </div>

                <div class="form-action">
                  <button type="submit" class="btn btn-form">Book Appointment</button>
                </div>
              </form>
            {% endif %}

          </div>
        </div>

      </div>
    </div>
  </section>
  <!--/ contact-->


<!--Footer Start-->
{% include '_footer.html' %}
<!--Footer End-->
{% endblock maincontent %}